/*
	This is the default.css.
	Contents of this file will be moved to other .css file.
*/
.base
{
	text-align: center;
	background-color: #f3f3f3;
	
}

	.contentWrapper
	{
		width: 1000px;
		margin: 10px  auto;
		/*position: relative;*/

		
	}

	.logo
	{
		/*position: absolute;*/
		text-align: left;	
		margin-left: 10px;
		margin-top: 20px;
	}

/*
	Menu css 
*/

	.menu
	{
		position: absolute;
		left: 600px;
		top: 15px;
	}

		.menu ul
		{
			list-style: none;
		}

			.menu ul li
			{
				float: left;
				font-family: Helvetica;
				margin-right: 40px;
				font-size: 13pt;
			}

		.menu a:link
		{
			color: #1b1b1b;
			text-decoration:none;
		}
		.menu a:visited
		{
			color: #1b1b1b;
			text-decoration:none;
		}
		.meun a:hover
		{
			color: #1b1b1b;
			text-decoration:none;
		}

		#naviBar
		{
			background-color: #fe692f;
			height: 4px;
			top: 50px;
			position: absolute;
			width: 50px;
		}

/*
	Brief introduction
*/
	#briefIntroBarUp
	{
		position: absolute;
		left: 400px;
		top: 75px;
	}

	#briefIntroBarBottom
	{
		position: absolute;
		left: 400px;
		top: 100px;
	}

	#briefIntroText
	{
		-webkit-transition: all 0.2s ease;
		text-align: center;
		margin-top: -31px;
		font-family: Helvetica;
		color: #f3f3f3;
	}
	#briefIntroText:hover
	{
		color: #646464;
	}

/*
	section
*/
	.briefIntroMyself
	{
		position: relative;
		float: left;
		width: 350px;
		margin-top: 30px;
	}

		.sectionTitleBar
		{
			background-color: #fe692f;
			width: 8px;
			height: 26px;
			position: absolute;
			left: 8px;
			top: 8px;
			position: 
		}

		.sectionTitle
		{
			font-family: Helvetica;
			font-size: 20pt;
			position: absolute;
			left: 20px;
			top: 5px;
			margin: 0px;
			color: #1b1b1b;
		}

		.sectionContentBrief
		{
			text-align: left;
			font-family: Helvetica;
			color: #1b1b1b;
			position: absolute;
			top: 20px;
			left: 6px;
			font-size: 14pt;
			line-height: 1;	
		}

		.sectionContent
		{
			position: absolute;
			top: 75px;
			left: 6px;
			text-align: left;
			font-family: helvetica;
			color: #404040;
			font-size: 10pt;
		}

			.sectionContent p
			{
				margin-bottom: 0px;
				margin-top: 3px;
			}

	.contact
	{
		position: relative;
		float: left;
		width: 250px;
		margin-top: 30px;
		margin-left: 50px;
	}
		.contactItems
		{

		}	

		.contactBar
		{
			position: absolute;
			width: 200px;
			height: 1px;
			background-color: #bbbbbb;
			top: 35px;
		}

		.contactItems li
		{
			font-family: helvetica;
			float: left;
			font-size: 14pt;
			color: #404040; 
			height: 32px;
			background-repeat: no-repeat;
			text-indent: 36px;
			list-style: none;
			padding-top: 5px;
			position: absolute;
		}
			.contactItems li a
			{
				-webkit-transition: all 0.5s ease;
			}
			.contactItems li a:link
			{
				color: #646464;
				text-decoration:none;
			}
			.contactItems li a:visited
			{
				color: #646464;
				text-decoration:none;
			}
			.contactItems li a:hover
			{
				color: #fe692f;
				text-decoration: none;
			}


			#facebook
			{
				left: 5px;
				top: 42px;
				background-image: url("../pics/contact_fb.png");
			}

			#google
			{
				left: 5px;
				top: 87px;
				background-image: url("../pics/contact_gg.png");
			}


			#renren
			{
				left: 5px;
				top: 132px;
				background-image: url("../pics/contact_rr.png");
			}

			#qq
			{
				left: 5px;
				top: 177px;
				background-image: url("../pics/contact_qq.png");
			}

	.recentWorks
	{
		position: relative;
		float: left;
		width: 300px;
		margin-top: 30px;
		margin-left: 30px;
	}

	footer
	{
		position: relative;
		left: 0px;
		font-family: helvetica;
		color: #646464;
		font-size: 10pt;
	}
		#footerBar
		{
			position: absolute;
			left: 400px;
			top: 55px;
		}

		footer p
		{
			position: absolute;
			left: 520px;
			top: 50px;
		}

/*
	gameIdea
*/
.pageHeadline
{
	position: relative;	
	
}
	.pageTime
	{
		position: absolute;
		right: 0px;
		top: 6px;
		font-family: helvetica;
		font-size: 10pt;
	}

.pageHeadlineTitle
{
	text-align: left;
	font-family: helvetica;
	color: #1b1b1b;
	font-size: 20pt;
	margin-left: 43px;
	margin-bottom: 10px;
}


.pageContentWrapper
{
    background: url("../pics/bglines.png") rgba(216, 210, 206, 0.2);
    background-position:100% 0%;
    border:1px solid #ccc;
    padding-left:35px;
    padding-right:35px;
    margin-left: 30px;
    border: 10px solid rgba(255, 255, 255, 0.3);
    padding-top: 10px;
    padding-bottom: 20px;
}


.pageContent
{
	text-align: left;
	font-family: helvetica;
	color: #1b1b1b;
	font-size: 10pt;
}
	.pageContent p
	{
		margin-bottom: 8px;
		margin-top: 8px;
	}

.occupation
{
	width: 1000px;
	height: 450px;
}

.pageHeadlineBar
{
	position: absolute;
	background-color: #fe692f;
	width: 8px;
	height: 30px;
	left: 30px;
	top: 2px; 

}

.artItemPic img
{
	-webkit-transition: all 0.5s ease;
	-webkit-filter: grayscale(100%);
	border: solid 1px #CCC;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
    box-shadow: 1px 1px 5px #999;
    
}

#fancybox-img
{
	width: 100%;
    height: auto;
    max-width: 600px;	

}

.artItemPic img:hover
{
	-webkit-filter: grayscale(0%);
}

.artList ul
{
	height: 450px;

}

.artItem
{
	list-style: none;
	width: 165px;
	text-align: left;
	float: left;
	margin-top: 40px;
	margin-left: 50px;
	margin-right: 10px;
}

	.artItem a
	{
		-webkit-transition: all 0.5s ease;
		font-family: helvetica;
		font-size: 10pt;
		color: #1b1b1b;
		font-weight: bold;

	}
	.artItem a:link
	{
		color: #fe692f;
		text-decoration:none;
	}
	.artItem a:visited
	{
		text-decoration:none;
		color: #fe692f;
	}
	.artItem a:hover
	{

		text-decoration:none;
		color: #1b1b1b;
	}

